<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <head th:include="include :: header"></head>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="app">
  <div class="row">
    <div class="col-sm-3">
      <div class="ibox ibox-body">
        <div class="ibox-title">
          <h5>选择类型</h5>
        </div>
        <div class="ibox-content">
          <div id="jstree"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-9 animated fadeInRight">
        <div class="ibox">
          <div class="ibox-body">
            <div class="fixed-table-toolbar">
              <div class="columns pull-left">
                <button shiro:hasPermission="cms:material:add" type="button" class="btn  btn-primary"
                        @click="add()">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                  <span>添加</span>
                </button>
                  <span id = "numb"></span>
              </div>
<!--              <div class="columns pull-right">-->
<!--                <button class="btn btn-success" onclick="reLoad()">查询</button>-->
<!--              </div>-->

<!--              <div class="columns pull-right col-md-2 nopadding">-->
<!--                <input id="searchName" type="text" class="form-control" placeholder="" />-->
<!--              </div>-->
            </div>
            <table id="exampleTable" data-mobile-responsive="true">
            </table>
          </div>
        </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="file-box" v-for="row in rows">
            <div class="file">
              <a href="#">
                <div class="image">
                  <img alt="image" class="img-responsive" :src="row.imgUrl">
                </div>
                <div class="file-name">
                  <small>名称:{{row.name}}</small>
                  <small class="columns pull-right">数量:{{row.number}}</small>
                  <br/>
                  <small>{{row.createDate}}</small>
                </div>
                &nbsp;&nbsp;<button class="btn btn-primary btn-xs" @click="edit(row.id)">编辑</button>
                &nbsp;&nbsp;<button class="btn btn-danger btn-xs" @click="remove(row)">删除</button>
                &nbsp;&nbsp;<button class="btn btn-warning btn-xs" @click="transfer(row.id)">转交</button>
                &nbsp;&nbsp;<button class="btn btn-success btn-xs" @click="detail(row.id)">详情</button>
              </a>
            </div>
          </div>
          <div id="incomeNum"></div>
        </div>
      </div>
      <div>
        <ul id="page"></ul>
      </div>
    </div>
  </div>
</div>
<div th:include="include :: footer"></div>
<script src="/js/bootstrap-paginator.min.js"></script>
<script src="/js/vue.min.js"></script>
<!--<script type="text/javascript" src="/js/appjs/cms/material/material.js"></script>-->

<script>
  var app = new Vue({
    el: '#app',
    data: {
      limit: 20,
      offset: 0,
      total: 0,
      type: '',
      rows: '',
      kindId : '',
      prefix: '/cms/material'
    },
    methods: {

      getData: function (kindId) {
        $.getJSON(this.prefix + "/list", {
            kindId: kindId,
            limit: this.limit,
            offset: this.offset,
            type: this.type
        }, function (r) {
            app.total = r.total;
            app.rows = r.rows;
            if (app.rows != '') {
              app.page();
            }
        });
      },
      page: function () {
        var options = {
          currentPage: app.offset / 20 + 1, //当前页
          totalPages: Math.ceil(app.total / 20), //总页数
          numberofPages: 4, //显示的页数
          bootstrapMajorVersion: 3,
          alignment: 'center',
          size: 'large',
          shouldShowPage: true,
          itemTexts: function (type, page, current) { //修改显示文字
            switch (type) {
              case "first":
                return "首页";
              case "prev":
                return "上一页";
              case "next":
                return "下一页";
              case "last":
                return "尾页";
              case "page":
                return page;
            }
          },
          onPageClicked: function (event, originalEvent, type, page) {
            app.offset = (page - 1) * 20;
            app.getData();
          }
        };
        $('#page').bootstrapPaginator(options);
        //
      },
      remove: function (row) {
        layer.confirm('确定要删除选中的记录？', {
          btn: ['确定', '取消']
        }, function () {
          $.ajax({
            url: "/cms/material/remove",
            type: "post",
            data: row,
            success: function (r) {
              if (r.code == 0) {
                layer.msg(r.msg);
                app.getData();
              } else {
                layer.msg(r.msg);
                app.getData();
              }
            }
          });
        })
      },
      add: function () {
        layer.open({
          type : 2,
          title : '增加',
          maxmin : true,
          shadeClose : false, // 点击遮罩关闭层
          area : [ '800px', '520px' ],
          content : this.prefix + '/add' // iframe的url
        });
      },
      edit: function(id) {
        layer.open({
          type : 2,
          title : '编辑',
          maxmin : true,
          shadeClose : false, // 点击遮罩关闭层
          area : [ '800px', '520px' ],
          content : this.prefix + '/edit/' + id // iframe的url
        });
      },
      transfer: function(id) {
        layer.open({
          type : 2,
          title : '转交报备',
          maxmin : true,
          shadeClose : false, // 点击遮罩关闭层
          area : [ '800px', '520px' ],
          content : this.prefix + '/transfer/' + id // iframe的url
        });
      },
      detail: function (id) {
        layer.open({
          type : 2,
          title : '详情',
          maxmin : true,
          shadeClose : false, // 点击遮罩关闭层
          area : [ '800px', '620px' ],
          content : this.prefix + '/details/' + id // iframe的url
        });
      },
      getTreeData: function() {
        $.ajax({
          type : "GET",
          url : "/cms/kind/tree",
          success : function(tree) {
            $('#jstree').jstree({
              'core' : {
                'data' : tree
              },
              'plugins' : [ "search" ]
            });
            $('#jstree').on("changed.jstree", function(e, data) {
              if (data.selected == -1) {
                app.getData()
              } else {
                app.getData(data.selected[0])
              }
            });
            // $('#jstree').jstree().open_all();
          }
        });
      },
      changeType: function (i) {
        this.type = i;
        this.offset = 0;
        this.getTreeData()
        this.getData();
      }
    },
    created: function () {
      this.changeType('')
    }
  });
</script>
</body>
</html>
